<template>
  <!-- 参数详解：
  showReset: 是否显示重置按钮
  searchData：通信对象
  cell：类名，用于区分元素占格大小
  lableName：搜索条件名称
  type：用于判断渲染的表单元素
  searchList：搜索时的条件对象
  place：提示文字
  option：选择类型的选择元素
  name：搜索时的传参名称
  value：初始化时的元素的值 -->
  <div id="box">
    <div class="box-card">
      <div v-for="(item, index) in searchData" :key="item.name" :class="[item.cell==4? 'cell4':'cell3']">
        <div class="lable">{{item.lableName}}：</div>
        <div class="cen">
          <!-- 输入框 -->
          <el-input v-if="item.type=='INPUT'" size="small" v-model="searchList[item.name]" :placeholder="item.place"></el-input>
          <!-- 单选框 -->
          <template v-if="item.type=='RADIO'">
            <el-radio-group v-model="searchList[item.name]" class="radioBox">
              <el-radio style="margin-left:10px" v-for="(radio) in item.option" :key='radio.value'  :label="radio.value">{{radio.name}}</el-radio>
            </el-radio-group>
          </template>
          <!-- 下拉框 -->
          <template v-if="item.type=='SELECT'">
            <el-select v-model="searchList[item.name]" size="small" class="radioBox" :placeholder="item.place">
              <el-option
                v-for="(select) in item.option"
                :key="select.value"
                :label="select.name"
                :value="select.value">
              </el-option>
            </el-select>
          </template>
          <!-- 时间选择器 -->
          <template v-if="item.type=='TIME'">
            <el-date-picker
              v-model="searchList[item.name]"
              type="date"
              :placeholder="item.place"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd">
            </el-date-picker>
          </template>
        </div>
      </div>
      <div class="butBox">
        <!-- 预留插槽位 -->
        <slot name='button-pri'></slot>
        <el-button type="primary" @click="searchTab">搜索</el-button>
        <el-button v-if="showReset" type="primary" @click='reset'>重置</el-button>
        <!-- 预留插槽位 -->
        <slot name='button-danger'></slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['searchData', 'showReset'],
  data () {
    return {
      searchList: {}
    }
  },
  computed: {},
  watch: {
    searchList: {
      deep: true,
      handler (newVal) {
        console.log(this.searchList, 555555)
      }
    }
  },
  created () {
    this.searchListFun()
  },
  mounted () {
    // this.searchListFun()
  },
  methods: {
    // 初始化搜索条件
    searchListFun () {
      let searchObj = {}
      this.searchData.map(item => {
        console.log(item, 999)
        searchObj[item.name] = item.value
      })
      this.searchList = searchObj
      console.log(this.searchList, 3333)
    },
    // 搜索
    searchTab () {
      console.log(this.searchList, '搜索条件')
      this.$emit('tabList', this.searchList)
    },
    reset () {
      this.searchListFun()
      console.log(this.searchList, '重置搜索条件')
    }
  }
}
</script>

<style scoped>
*{
  margin: 0;
  /* padding: 0; */
}
.box-card {
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  width: 100%;
  margin: 10px auto;
  background: #fff;
}
.cell4{
  margin: 10px 0;
  display: flex;
  align-items: center;
  width: 25%;
  flex-shrink: 0;
}
.cell3{
  margin: 10px 0;
  display: flex;
  align-items: center;
  width: 33%;
  flex-shrink: 0;
}
.lable{
  width: 120px;
  text-align: right;
  font-size: 14px;
  color: #222222;
}
.cen{
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  color: #222222;
  margin-left: 10px;
  width: calc(100% - 120px);
}
.radioBox{
  display: flex;
  justify-content: start;
  align-items: center;
  height: 30px;
  line-height: 30px;
}
.butBox{
  width: 100%;
  display: flex;
  justify-content: end;
  align-items: center;
  margin-top: 20px;
}

</style>
